Unfortunately, your browser is currently unsupported by our web application


Chess Diagram Maker home


Welcome


Welcome to Chess Diagram Maker. This online tool lets you easily create advanced diagrams for use in your documentation. It's free. No advertising.


News

The completely restyled Chess Diagram Maker is being launched.
It has a new look with some minor functional improvements. The new layout is better suited for future extensions.


A new feature is added to save your diagram in the cloud by uploading it anonymously to the image sharing site imgur.com
Imgur is the best place to share and enjoy the most awesome images on the Internet.


A new version is released where local storage is used to store upload links and to store board settings.
The next time you visit the diagram maker it restores the board of the last session.


A new feature is implemented to store diagrams (max 10) for reuse at a later moment.


A new feature will be implemented to create simple animations of changing positions. You can save the animations as animated gifs.


A new feature is implemented to drag pieces of the board from one square to another.
Existing functionality to add or remove pieces is unchanged.


A new tool is launched to draw shapes like lines, rectangles or circles on top of the diagram.


The table with background patterns for dark squares is extended. Seven new light patterns are added.



Preferences.


Your browser does not support HTML5 local storage.
No preferences.

Your browser supports local storage. It will be used to make the application more comfortable.

Use local storage

If button switched to OFF, storage will be cleared.


Setup pieces


Choose your favorite piece.

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?

The kind of piece you will put on the board.

Select:
?
?
?
?
?
?

?
?
?
?
?
?

?

The piece format; SVG for better resolution but not supported by all browsers. And not available for all pieces.

Select:



Setup colors


Choose your favorite color pattern in the button box below. The first two rows are fixed color patterns. The last three rows are variable color patterns depending on the choice of the fixed color pattern.



Convert to grey colors:

Gradient:

Square color contrast:


Board properties


Square border:


Pattern:

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?

Board size:

Frame size:

Show coordinates inside:

Show coordinates outside:

Board reversed:




Setup position


Setup the position by clicking on squares or by entering a FEN string in the input field below.


Initial position: init_pos

Empty position: empty_pos


Textlines at top and bottom of the board.


Save board as image.


Although not supported by all browsers, two methods are available to make an image of the generated board.

  1. Move the mouse cursor on the board and give a right click. A browser menu appears with some option "Save Image As ...".

  2. Push one of the buttons below to view and save the board as image.
    home or home


Upload board as image.


Save your diagram in the cloud by uploading it anonymously to the image sharing site imgur.com
Again, this feature is not supported by all browsers.


No upload request

Link to the uploaded image is:
no link



Store diagrams.


Store max 10 diagrams on local storage for reuse at a later moment.
Enter a name in the list below and the current diagram will be saved.


This feature is disabled. The reason can be that your browser does not support local storage or you disable the use of local storage.

1 restore_diagram
2 restore_diagram
3 restore_diagram
4 restore_diagram
5 restore_diagram
6 restore_diagram
7 restore_diagram
8 restore_diagram
9 restore_diagram
10 restore_diagram

Create Animation.


Create an animation of changing positions.
The result is an animated image which can be downloaded as usual.


Animation file extension:

Delay

Title:

Record mouse actions :

Generate animation:




Draw shapes.


You can illustrate your diagram with shapes.
The shapes can be drawn with the mouse by clicking and dragging. The basic forms to draw are line, rectangle, ellipse, polygon and free form.


Pencil size:


Paint color:



Undo last shape: undo shape

Clear all shapes: clear shapes


=============================================
Use the left mouse button to draw shapes.
To start the drawing of a shape, push the left mouse button down.
Then drag the mouse pointer to form the shape.
If you release the left mouse button, the shape is finished.

For a polygon the drawing is a bit different.
Start the drawing of a polygon by a pushing the left mouse button down and up. The first point of the polygon is now defined.
Drag the mouse pointer to locate the next point of the polygon.
Push the mouse button down and up to define the second point. Repeat this process for the other points of the polygon.
The drawing is finished after the mousepointer is near the first point or if 8 sides are drawn.

The shapes are not resized if you resize the board. So before drawing first set the preferred size of the board.





HELP


A list of adjustable properties.

  1. Piece appearance (30 themes).
  2. Color scheme for squares: choice of 600 color combinations.
    Gradient for each color: linear or radial.
    Convert each color to grey values.
    Set the contrast of dark and light square colors.
  3. Size of the board on the screen.
    Defines the resolution of the saved image.
  4. The size and style of the frame.
  5. Borders of squares (no border, light or dark).
  6. Orientation of the board (rotation).
  7. Flag to show or hide the coordinates of the squares (inside or outside).
  8. Format of piece images (SVG or PNG).
    See other section for an explanation.
  9. A textline on top or at the bottom of the board (with transparant background).
  10. Transparent background texture for dark squares (pattern).

You can change the position in two ways.

  1. Put a piece on the board by clicking on a square.
    You can select which kind of piece to put on the board: 6 black pieces, 6 white pieces and a trash for removing pieces.
    After putting a piece, you can drag it from one square to another.
  2. By entering a FEN string: a standard encoding to specify a position. The FEN string must meet the standards of PGN (Portable Game Notation).
    The FEN string can be entered in an input field. The position on the board is automatically adapted after an update of the FEN string.
    Conversely, if you update a position by clicking on the squares, the FEN string in the input field is automatically adapted.

Two buttons facilitates the setup of the initial position and the empty position.


Although not supported by all browsers, two methods are available to make an image of the generated board.

  1. Move the mouse cursor on the board and give a right click. A browser menu appears with some option "Save Image As ...".

  2. A special button is created which allows you to view or save the board as an image.

A commonly used extension for images is jpg but here you had to use the well known extension png.

The size of the board on the screen defines the resolution of the saved image. Choose a large size for a high resolution.
The image resolution varies from low (356x356, 11 kB) to high (996x996, 86 kB).

For sharp piece images we advice to use the format SVG instead of PNG. But not all browsers are capable of creating images for the piece format SVG.

Important!
Unfortunately, at this moment not all browsers support one of these methods. Browsers that currently support one of the methods are:
Firefox, Chrome, Opera, Safari, Android browser, Chrome for Android.
So temporary it seems not possible to make images with Internet Explorer.


Piece images are read from files with two available formats: SVG and PNG. The SVG format is a modern format with the property that images keep its sharpness independent of the size they were displayed.

You can choose which format to use (default PNG).
For sharp piece images we advice to use the format SVG. But not all browsers are capable of creating images for the piece format SVG. And at this moment the SVG format is not available for all pieces. You can try it and see if it works. Otherwise keep the piece format PNG.


Local storage aka. Web storage are methods and protocols used for storing data in a web browser. It supports persistent data storage, similar to cookies.
Web storage is being standardized by the World Wide Web Consortium (W3C). It is supported by most modern browsers.

The diagram maker uses web storage to store:
1. Upload links if you upload the board as image to imgur.com
2. Board properties like colors, piece type and position. If you use the diagram maker a next time it restores the last used properties.
3. Diagrams for reuse at a later moment (max 10).
4. Settings of the last generated animation.
5. A list of user defined shapes.

If you like you can disable the use of local storage with the switch in the section Preferences.


In the section "Create Animation" you can create an animated GIF or PNG of changing positions.
Each animation is defined by three main properties:
- the initial position.
- the delay of a frame (milliseconds).
- the transition of one frame to the other.

To create an animation, follow the next steps.
1. Choose an initial position.
2. Press the button Start to open the recording phase. During the recording phase, all mouse actions at the board are stored as transitions of the position.
3. Change the current position with your mouse by clicking and dragging pieces. A counter is displayed to show the number of stored mouse actions.
4. Press the GO button to generate an animation. Wait a moment before the animation is created and displayed.

At each moment during the recording phase you can generate an animation.
Once the recording phase is stopped by pressing the Stop button, no new mouse actions can be added.

The delay of one frame of the animation can be set by a sliderbar. During the recording phase the delay of transitions can be changed.

A title is displayed at the start of the animation. You can change the title in a text field.
A new line is created with the separator ++.
If you let the text field empty, no title is displayed.

Use the checkbox to select the extension of the animation file: GIF or PNG.
GIF is an old format and is widely supported.
Sometimes PNG animations are prefered over GIF animations.
By a special design the PNG animations has a much smaller filesize.


To make something clear, you can illustrate your diagram with shapes. The shapes can be drawn with the mouse by clicking and dragging. Use the left mouse button to draw shapes. The shapes are put on top of the diagram.
Choose one of the basic forms to draw: line, rectangle, ellipse, polygon or free form.
The shapes are not resized if you resize the board. So before drawing, first set the preferred size of the board.
The shapes are stored in local storage. If the diagram maker is started, stored shapes are reloaded and drawn.
For more usage tips see the section of the drawing tool.


  • 26 march 2017: release 2017.03.1
    New completely restyled version.
  • 02 may 2017: release 2017.05.1
    New toggle switch for grey colors.
    New toggle switch for color gradient of dark squares.
  • 14 may 2017: release 2017.05.2
    New square border style "outset" added.
    Added a feature to upload diagrams to the site imgur.com
  • 20 may 2017: release 2017.05.3
    Feature to display some user statistics.
    Storing links to imgur.com of uploaded images.
  • 11 jun 2017: release 2017.06.1
    Local storage implemented for storing board properties.
  • 13 jun 2017: release 2017.06.2
    Coloring of dark squares extended with radial gradient.
  • 18 jun 2017: release 2017.06.3
    New piece icons B34, B35, B36.
  • 27 jun 2017: release 2017.06.4
    Demo section: removed.
    New feature to store max 10 diagrams on local storage.
  • 22 jul 2017: release 2017.07.1
    New feature to create animated gifs.
  • 18 aug 2017: release 2017.08.1
    New button in the Save board as image section: open board as image in a separate window.
    Added support for PNG animations (APNG).
  • 07 sep 2017: release 2017.09.1
    Added support for dragging pieces.
  • 17 sep 2017: release 2017.09.2
    Rebuild of animation support. Simplified with mouse actions (dragging).
    New piece theme B38 Maxine.
  • 01 oct 2017: release 2017.10.1
    New: patterns. Select transparent background textures for dark squares.
  • 9 oct 2017: release 2017.10.2
    New: more color combinations by setting square color contrast.
    Adding four new patterns for dark squares.
  • 27 oct 2017: release 2017.10.3
    Revision of selection box for square border. Added two new options.
    Small update of piece theme B02.
  • 10 march 2018: release 2018.03.1
    A new tool to draw shapes at the top of a diagram.
  • 20 sep 2018: release 2018.09.1
    Multiline input of fen position.
    Simplified switch buttons for better compatibility.
  • 01 dec 2018: release 2018.12.1
    Piece theme B26 Kilfiger replaced by theme B26 Arthur.
  • 02 dec 2018: release 2018.12.2
    New Look for piece themes B06 and B07 (font Alpha).
    Piece theme B14 and B15 (font Regular) enhanced.
    Piece theme B24 (font Marroquin) enhanced.
    Piece theme B25 (font Good Companion) enhanced.
    Piece theme B09 and B10 (unicode) enhanced.
  • 09 dec 2018: release 2018.12.3
    Piece themes B36, B37, B38 upgraded.
    Piece theme B01 (font Merida 1) upgraded.
  • 17 dec 2018: release 2018.12.4
    Piece themes B33, B35 (Yassou) and B30 (3D Fantasy) upgraded.
    New piece theme B41: font Merida 2.
    New piece themes: Pepin B42, B43, B44.
    New piece theme B45: font Good Companion 2.
    New piece theme B46: Pacman ghost
    New piece theme B47: 3D Fantasy 2
  • 05 jan 2019: release 2019.01.1
    New piece theme B48: 3D Fantasy 3
    Piece theme B31 (Mazursky) upgraded.
  • 16 jan 2020: release 2020.01.1
    PHP counter scripts removed.
    Revised upload canvas to IMGUR with PHP script.

The Chess Diagram Maker is a personal project, setup and maintained as a leisure activity.
I hope it will be useful and you enjoy it.
The work is copyrighted. Please ask for permission to use parts of my work.

The diagram maker should work well for modern browsers. Maybe it does not work well always because browsers work differently. Browsers are constantly evolving so you can expect if it does not work well now, it works well in the future.

The diagram program uses the programming language Javascript. Your browser must be enabled to use Javascript.

Comments or questions?
Please send a mail to: Arthur Kalverboer


Thanks to Peter Wong for giving permission to use his set of chess piece icons (virtual pieces B16..B22). See his beautiful icons and graphics about chess at virtualpieces.net.

As many thanks go to Maurizio Monge for using his creative set of chess piece icons (B11,B12,B13,B39). You can admire his chess art at Maurizio Monge's homepage.

Piece set B31 is a slightly modified set of Yuri Mazursky licensed under CC BY 2.5.

The creation of animated gif is supported by the jsgif library of Kevin Kwok.
Copyright (c) 2010-2014 Kevin Kwok.
Email: antimatter15@gmail.com

Web hosting by the Dutch association Open Domein.


You can download a generated diagram as image under the condition that it belongs to the public domain, anyone can freely make copies of it, distribute it, use it for commercial purposes or sell it to others.

The term public domain refers to creative materials that are not protected by intellectual property laws such as copyright, trademark, or patent laws. The public owns these works, not an individual author or artist. Anyone can use a public domain work without obtaining permission, but no one can ever own it.


C0 C1 C2 C3 C4 C6 C8 C9 C10 C12 C7